
<template>
  <div class="user-card" :style="containerStyle">
    <!-- 用户卡片内容 -->
    <div class="card-content" :style="cardStyle">
      <!-- 左侧内容 -->
      <div class="card-left">
        <img
          :src="data.avatar || defaultAvatar"
          alt="用户头像"
          class="user-avatar"
        />

        <div class="user-info">
          <h3 class="user-title">{{ data.title || '用户标题' }}</h3>
          <p class="user-description">{{ data.description || '用户描述' }}</p>
        </div>
      </div>

      <!-- 右侧按钮 -->
      <div class="card-right">
        <el-button
          :type="data.buttonType || 'danger'"
          :size="data.buttonSize || 'small'"
          :color="data.buttonColor"
          @click="handleClick"
        >
          {{ data.buttonText || '立即关注' }}
        </el-button>
      </div>
    </div>

    <!-- 删除组件 -->
    <slot name="deles" />
  </div>
</template>

<script setup>
import { computed } from 'vue'

// 定义组件属性
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
  styles: {
    type: Object,
    default: () => ({})
  }
})

// 定义事件
const emit = defineEmits(['click'])

// 默认头像
const defaultAvatar = computed(() => '/src/assets/images/default-avatar.png')

// 计算容器样式
const containerStyle = computed(() => {
  return {
    marginTop: `${props.styles.marginTop || 0}px`,
    marginBottom: `${props.styles.marginBottom || 0}px`,
    marginLeft: `${props.styles.marginLeft || 0}px`,
    marginRight: `${props.styles.marginRight || 0}px`
  }
})

// 计算卡片样式
const cardStyle = computed(() => {
  return {
    backgroundColor: props.data.backgroundColor || '#ffffff',
    height: `${props.data.height || 90}px`
  }
})

// 事件处理
function handleClick() {
  emit('click', props.data)
}
</script>

<style lang="scss" scoped>
.user-card {
  width: 100%;
  box-sizing: border-box;

  .card-content {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 15px;
    box-sizing: border-box;

    .card-left {
      display: flex;
      align-items: center;
      flex: 1;

      .user-avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 10px;
      }

      .user-info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 146px;
        padding: 8px 0;

        .user-title {
          margin: 0;
          color: #333;
          font-weight: 700;
          font-size: 14px;
          line-height: 20px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        .user-description {
          margin: 0;
          color: #a9a9a9;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-size: 12px;
        }
      }
    }

    .card-right {
      flex-shrink: 0;
    }
  }
}
</style>
